<template>
  <div id="app">
    <h1>{{title}}</h1>
    <input type="text" v-model="item">
    <button v-on:click="add">添加</button>
    <ul>
      <li v-for="(todo,index) in todos":class="{done:todo.done}">
        <label>{{index+1}}.{{todo.value}}</label>
        <time>{{todo.created|date}}</time>
      </li>
    </ul>
  </div>
</template>

<style>
  .done{
    text-decoration: line-through;
  }
</style>
<script>

  export default{
    name:'app',
    methods:{
      add: function (x) {
        this.todos.push({value:this.item,done:false,created:new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()})
      }
    },
    data(){
      return {
          title:"vue-todos",
          todos:[
            {value:"阅读一本关于前端开发的书",done:false,created:new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()},
            {value:"补充范例代码",done:true,created:new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()},
            {value:"写心得",done:false,created:new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()}
          ]
      }
    }
  }
</script>